<template>
  <el-card shadow="hover" v-bind="$attrs" v-on="$listeners" style="position: relative">
    <div v-if="operation" class="_operation">
      <i class="el-icon-edit" style="margin-right: 5px;" @click="handleEdit"></i>
      <my-popconfirm-delete @confirm="handleDelete">
        <i class="el-icon-remove-outline"></i>
      </my-popconfirm-delete>
    </div>
    <slot>

    </slot>
  </el-card>
</template>

<script>
  export default {
    name: "my-note-card",
    props: {
      /** 是否显示操作按钮 **/
      operation: {
        type: Boolean,
        default: true
      }
    },
    methods:{
      /** 编辑 **/
      handleEdit(){
        this.$emit('edit');
      },
      /** 删除 **/
      handleDelete(){
        this.$emit('delete');
      }
    }
  }
</script>

<style lang="scss" scoped>
  ::v-deep .el-card__body{
    padding: 10px;
  }
  ._operation{
    position: absolute;
    font-size: 5px;
    z-index: 99;
    right: 5px;
    top: 5px;
    i{
      color: #DCDFE6;
    }
    i:hover{
      color: #38A5EE;
    }
  }
</style>
